<template>
  <div class="app">
    <home_title></home_title>
    <rankChange :value="value"></rankChange>
    <!-- <router-link target="_blank" :to="{path:'/ranking_list2'}">总分榜</router-link> -->
    <van-row type="flex" justify="center" gutter="30" class="row">
      <van-col span="8" style="margin-top:40px;margin-right:-10px">
        <p>第3名</p>
        <van-image
          round
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="ranking_name">{{news[2].username}}</p>
        <p class="score">获得{{news[2].fen}}分</p></van-col
      >
      <van-col span="7" style="margin-right:10px;margin-left:-10px">
        <p>第1名</p>
        <van-image
          round
          width="120"
          height="120"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="ranking_name">{{news[0].username}}</p>
        <p class="score">获得{{news[0].fen}}分</p></van-col
      >
      <van-col span="6" style="margin-top:25px;margin-left:10px">
        <p>第2名</p>
        <van-image
          round
          width="110"
          height="110"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          style="margin-left:-10px"
        />
        <p class="ranking_name">{{news[1].username}}</p>
        <p class="score">获得{{news[1].fen}}分</p></van-col
      >
    </van-row>
      <van-row v-for="(item,index) in news.slice(3,999)" :key="item.id" class="ranking-top">
        <van-col span="2"
          ><p class="paihang">{{ index+4 }}</p></van-col
        >
        <van-col span="6" style=""
          ><van-image
            round
            width="80"
            height="80"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        /></van-col>
        <van-col span="2" :class="{ active: my_id === item.id }"
          ><p>{{ item.username }}</p></van-col
        >
        <van-col span="4" offset="10"
          ><p>获得{{ item.fen }}分</p></van-col
        >
      </van-row>
    <tabbar></tabbar>
  </div>
</template>

<script>
import Home_title from "@/components/Home_titleView.vue";
import Tabbar from "@/components/TabbarView.vue";
import RankChange from "@/components/RankChangeView.vue";
import axios from "axios";

export default {
  components: {
    Home_title,
    Tabbar,
    RankChange,
  },
  data() {
    return {
      currentIndex: 0,
      active: 4,
      news: {},
      max: 0,
      my_id: 3,
      value:1
    };
  },
  created() {
    axios
      .get("/api/vue_admin")
      .then((response) => {
        // console.log(response.data);
        this.news = response.data.message;
        this.getranking();
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  },
  methods: {
    getranking() {
      var max = 0;
      var i, j;
      for (i = 0; i < this.news.length - 1; i++) {
        for (j = 0; j < this.news.length - 1; j++) {
          if (this.news[j].fen > this.news[j + 1].fen) {
            this.max = this.news[j];
            this.news[j] = this.news[j + 1];
            this.news[j + 1] = this.max;
          }
        }
      }
      console.log(this.news);
    },
  },
  computed: {},
};
</script>

<style scoped>
.row {
  margin-top: 20px;
  margin-bottom: -10px;
  text-align: center;
}
.app {
  /* background: url(../../public/img/background.jpg);
   */
   background: url("../../public/img/back2.jpg");
}
.ranking-top {
  display: flex;
  align-content: stretch;
  justify-content: center;
  align-items: center;
  padding: 5px;
  margin: 50px 30px 0;
  border: 1px lightgray solid;
}
.ranking_name {
  font-size: 25px;
  margin: 0;
}
.paihang {
  font-weight: 300;
  font-size: 30px;
  color: white;
}
.active {
  font-size: 30px;
  font-weight: 200;
  color: aqua;
}
p{
  color: white;
}
</style>